<template>
  <div class="tags-container">
    <el-card shadow="never">
      <el-row class="top-input">
        <el-col :span="5">
          <span class="tagtitle">标签名称</span>
          <el-input v-model="queryInfo.tagName"></el-input>
        </el-col>
        <el-col :span="7">
          <span class="status">状态</span> &nbsp;&nbsp;<el-select
            v-model="queryInfo.state"
            placeholder="请选择"
          >
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-button size="small" @click="clearClick">清除</el-button>
          <el-button size="small" type="primary" @click="getTableData"
            >搜索</el-button
          >
        </el-col>
        <!-- 新增标签 -->
        <el-col :span="3" :offset="6">
          <el-button
            class="addtag"
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="addFormShow"
            >新增标签</el-button
          >
        </el-col>
      </el-row>
      <el-alert
        :title="'数据一共' + total + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <template>
        <el-table :data="tableData" style="width: 100%" highlight-current-row>
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column label="所属学科" prop="subjectName">
          </el-table-column>
          <el-table-column label="标签名称" prop="tagName"> </el-table-column>
          <el-table-column label="创建者" prop="username"> </el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ scope.row.state === 1 ? "已开启" : "已禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="toggleStatus(scope.row)">
                {{ scope.row.state === 0 ? "启用" : "禁用" }}</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="editHandlerClick(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="deleteTag(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryInfo.pagesize"
          layout="  prev, pager, next,sizes, jumper"
          background
          :total="total"
        >
        </el-pagination>
      </template>

      <!-- 新增目录 对话框-->
      <el-dialog
        title="修改目录"
        :visible.sync="addDialogVisible"
        width="30%"
        @close="handlerAddClose"
      >
        <el-form
          :model="addTagForm"
          :rules="addTagFormRules"
          ref="addruleFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="所属学科">
            <el-select v-model="addTagForm.subjectID" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="addTagForm.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAddTagFrom">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改标签名 对话框-->
      <el-dialog
        title="修改目录"
        :visible.sync="editDialogVisible"
        width="30%"
        @close="handlerClose"
      >
        <el-form
          :model="editTagForm"
          :rules="editTagFormRules"
          ref="ruleFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="所属学科">
            <el-select v-model="editTagForm.subjectName" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="editTagForm.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitTagFrom">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { parseTimeByString } from '@/filters'
import { list as getSubList } from '@/api/hmmm/subjects.js'
import {
  list as getTagList,
  update as editTag,
  changeState as changeTagStatus,
  add as addTag,
  remove as deleteTag
} from '../../api/hmmm/tags.js'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    parseTimeByString
  },
  data() {
    return {
      tableData: [],
      tagList: [],
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: null
      },
      editDialogVisible: false,
      editTagForm: {
        // 修改表单数据
        subjectID: this.getSubjectID,
        tagName: '',
        subjectName: ''
      },
      subjectName: '',
      rowId: '', // 每条数据的id
      editTagFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      counts: 0,
      options: [],
      addTagForm: {
        subjectID: '',
        tagName: ''
      },
      addDialogVisible: false,
      addTagFormRules: {
        // 添加目录验证规则
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      total: 0
    }
  },
  methods: {
    async editHandlerClick(row) {
      this.editTagForm.tagName = row.tagName
      this.editTagForm.subjectID = row.subjectID
      this.editTagForm.subjectName = row.subjectName
      try {
        const { data } = await getSubList()
        // console.log(data);
        this.rowId = row.id
        this.options = data.items
      } catch (err) {
        console.log(err)
      }
      this.editDialogVisible = true
    },
    submitTagFrom() {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (!valid) return this.$message('请输入有效的表单值')
        try {
          await editTag({
            subjectID: this.editTagForm.subjectID,
            tagName: this.editTagForm.tagName,
            id: this.rowId
          })
          this.$message.success('编辑成功')
          this.getTableData()
        } catch (err) {
          this.$message.fail('编辑失败')
        }
        this.editDialogVisible = false
      })
    },
    async toggleStatus(row) {
      // 切换禁用启用状态
      try {
        await changeTagStatus(row.id + '/' + row.subjectID)
        this.$message.success('切换成功')
        if (row.state === 1) {
          row.state = 0
        } else {
          row.state = 1
        }
      } catch (err) {
        console.log(err)
        this.$message.fail('切换失败')
      }
    },
    async deleteTag(row) {
      // 删除表单一项
      const res = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((e) => e)
      if (res === 'cancel') return this.$message.info('取消操作')
      try {
        await deleteTag(row.id)
        this.$message.success('删除成功')
        if (this.tableData.length) {
          // 本页有数据,当前页数大于1就减减
          this.queryInfo.page > 1 && this.queryInfo.page--
        }
        this.getTableData()
      } catch (err) {
        console.log(err, 'deleteTag')
        this.$message.fail('删除失败')
      }
    },
    handlerClose() {
      this.$refs.ruleFormRef.resetFields()
      this.editTagForm.subjectID = ''
    },
    clearClick() {
      // 清除搜索框内容
      this.queryInfo.tagName = null
      this.queryInfo.state = null
      this.getTableData(this.queryInfo)
    },
    async addFormShow() {
      try {
        const { data } = await getSubList({})
        this.options = data.items
      } catch (err) {
        console.log(err)
      }
      this.addDialogVisible = true
    },
    // 获取页面数据
    async getTableData() {
      try {
        const { data } = await getTagList(this.queryInfo)
        console.log(data)
        this.total = data.counts
        this.tableData = data.items
      } catch (err) {
        console.log(err)
      }
    },
    handlerAddClose() {
      this.$refs.addruleFormRef.resetFields()
    },
    submitAddTagFrom() {
      this.$refs.addruleFormRef.validate(async (valid) => {
        if (!valid) return this.$message.info('请输入有效的表单数据')
        // console.log(this.addTagForm);
        try {
          await addTag(this.addTagForm)
          this.$message.success('添加成功')
          this.getTableData()
        } catch (err) {
          console.log(err)
          this.$message.fail('添加失败')
        }
        this.addDialogVisible = false
      })
    },
    // 分页功能
    handleSizeChange(size) {
      this.queryInfo.pagesize = size
      this.getTableData()
    },
    handleCurrentChange(page) {
      this.queryInfo.page = page
      this.getTableData()
    }
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="less" scoped>
::v-deep.tags-container {
  padding: 10px;
}
::v-deep.el-col {
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: 32px;
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}
.tagtitle {
  display: inline-block;
  width: 109px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.status {
  display: inline-block;
  width: 55px;
  margin-left: 60px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.addtag {
  float: right;
}
.el-row {
  margin-bottom: 23px;
}
::v-deep.el-table th,
.el-table tr {
  background-color: #fafafa;
  // box-shadow: 0 0 5px 5px #ccc;
}
.el-alert {
  margin-bottom: 30px;
}
::v-deep.el-dialog__header {
  background-color: #409eff;
  color: #fff;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
.el-pagination {
  float: right;
  right: 0;
  margin-top: 20px;
}
::v-deep.top-input .el-input--suffix .el-input__inner {
  width: 215px;
}
.tab {
  padding: 20px;
  // background-color: rgb(220, 37, 37);
  .states {
    float: right;
    position: relative;
    right: 410px;
  }
  .left {
    float: right;
    padding-left: 10px;
    .addLeft {
      position: relative;
      left: 100%;
    }
  }
}
.before {
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  background-color: #ccc;
}
</style>
